<template>
  <div class="box">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="套餐名称" prop="name">
        <el-input v-model="ruleForm.name" style="width:98%"></el-input>
      </el-form-item>
      <el-form-item label="套餐类型" prop="region">
        <el-select
          v-model="ruleForm.region"
          style="width:50%"
          @change="chagemeal"
          placeholder="请选择套餐类型"
        >
          <el-option label="小时卡" value="3"></el-option>
          <el-option label="次卡" value="1"></el-option>
          <!-- <el-option label="周卡" value="3"></el-option> -->
          <el-option label="期卡" value="2"></el-option>
          <!-- <el-option label="月卡" value="5"></el-option> -->
          <!-- <el-option label="年卡" value="6"></el-option> -->
        </el-select>
      </el-form-item>
      <div style="text-align:center;width:98%;margin-left:20px">
        <el-divider>使用条件</el-divider>
      </div>
      <el-form-item v-if="changeval==1" label="最长可使用" prop="longtime">
        <el-input v-model="ruleForm.longtime" style="width:98%">
          <template slot="append">小时</template>
        </el-input>
      </el-form-item>
      <el-form-item
        v-if="changeval==1"
        label="可使用次数"
        prop="useonce"
      >
        <el-input v-model="ruleForm.useonce" style="width:98%">
          <template slot="append">次</template>
        </el-input>
      </el-form-item>
      <!-- <el-form-item
        v-if="changeval==2"
        label="套餐天数"
        prop="mealday"
      >
        <el-input v-model="ruleForm.mealday" style="width:98%">
          <template slot="append">天</template>
        </el-input>
      </el-form-item> -->
      <!-- <el-form-item v-if="changeval==2" label="激活方式" prop="activationtype">
        <el-radio-group v-model="ruleForm.radio" @change="changeradio">
          <el-radio label="1">首次使用</el-radio>
          <el-radio label="2">立即</el-radio>
          <el-radio label="3">设置生效日期</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <!-- <el-form-item v-if="radiobool=='3'" label="生效日期" prop="effectivedate">
        <el-date-picker
          value-format="yyyy-MM-dd"
          v-model="ruleForm.effectivedate"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item> -->
      <el-form-item v-if="changeval==3" label="可用总小时数" prop="count_hour" style="white-space: nowrap;">
        <div style="display:flex;">

        <el-input v-model="ruleForm.count_hour" style="width:98%">
          <template slot="append">小时</template>
        </el-input>
        </div>

      </el-form-item>
      <el-form-item label="有效期" v-if="changeval==3||changeval==2" prop="day">
        <el-input v-model="ruleForm.day" style="width:98%">
          <template slot="append">天</template>
        </el-input>
        <div v-if="changeval==2">有效期不能为0</div>
        <div v-if="changeval==3">有效期为0时则不限制</div>
      </el-form-item>
      <el-form-item v-if="changeval!=''" label="字体颜色选择" style="white-space: nowrap;" prop="fontcolor">
        <div style="display:flex;">
          <el-input v-model="ruleForm.fontcolor" style="width:95%"></el-input>
          <el-color-picker @change="changecolor" v-model="color"></el-color-picker>
        </div>
      </el-form-item>
      <el-form-item v-if="changeval!=''" label="背景颜色选择" style="white-space: nowrap;" prop="backcolor">
        <div style="display:flex;">
          <el-input v-model="ruleForm.backcolor" style="width:95%"></el-input>
          <el-color-picker @change="changecolors" v-model="colors"></el-color-picker>
        </div>
      </el-form-item>
      <div v-if="changeval==1" style="display:flex;align-items: flex-start">
        <div
          style="display:flex;width:100%;align-items: flex-start;justify-content: flex-start;flex-direction: column;"
        >
          <div class="flexwap">
            <el-form-item label="天数" prop="daynum">
              <el-input v-model="ruleForm.daynum" oninput="value=value.replace(/[^\d.]/g, '').replace(/^0{1}/g,'')">
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
              <el-input v-model="ruleForm.price" oninput="value=value.replace(/[^\d.]/g, '').replace(/^0{1}/g,'')">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-button @click="addDomain" style="margin-left:40px" type="text">添加</el-button>
          </div>
          <div class="flexwap" v-for="domain in ruleForm.domains" :key="domain.key">
            <el-form-item label="天数" prop="daynum">
              <el-input v-model="domain.value">
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
              <el-input v-model="domain.values">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-button @click.prevent="removeDomain(domain)" style="margin-left:40px" type="text">删除</el-button>
          </div>
          <div v-if="tips" style="color:#FF2222;font-size:12px;margin-left:60px">提示：最多添加四个</div>
        </div>
      </div>
      <div style="text-align:center;width:98%;margin-left:20px">
        <el-divider>可预约时间段</el-divider>
      </div>
      <div style="color:#333333;font-size:14px;margin-bottom:24px;margin-left:20px">工作日和周末至少选择一个</div>
      <div style="margin-left:20px">
        <div style="margin-bottom:14px;display:flex;width:100%">
          <el-checkbox v-model="ruleForm.checked1" @change="clichecked1" label="工作日" border></el-checkbox>
          <div v-if="ruleForm.checked1" style="margin-left:18px">
            <!-- <el-time-select
              placeholder="开始时间"
              v-model="startTime"
              :picker-options="{start: '00:00',step: '00:30',end:'24:00',maxTime: endTime}"
            ></el-time-select> -->
            <el-time-picker
              is-range
              v-model="startTime1"
              format="HH:mm"
              @change="changetabs"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围">
            </el-time-picker>
            <!-- <span class="line" :span="1">-</span>
            <el-time-select
              placeholder="结束时间"
              v-model="endTime"
              :picker-options="{start: '00:00',step: '00:30',end: '24:00',minTime: startTime}"
            ></el-time-select> -->
          </div>
        </div>
        <div style="margin-bottom:42px;display:flex;width:100%">
          <el-checkbox v-model="ruleForm.checked2" @change="clichecked2" label="周末" border></el-checkbox>
          <div v-if="ruleForm.checked2" style="margin-left:18px">
            <el-time-picker
              is-range
              v-model="startTime2"
              format="HH:mm"
              @change="changetaps"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围">
            </el-time-picker>
            <!-- <el-time-select
              placeholder="开始时间"
              v-model="startTimes"
              :picker-options="{start: '00:00',step: '00:30',end: '24:00',maxTime: endTimes}"
            ></el-time-select>
            <span class="line">-</span>
            <el-time-select
              placeholder="结束时间"
              v-model="endTimes"
              :picker-options="{start: '00:00',step: '00:30',end: '24:00',minTime: startTimes}"
            ></el-time-select> -->
          </div>
        </div>
      </div>
      <div style="text-align:center;width:98%;margin-left:20px">
        <el-divider></el-divider>
      </div>
      <el-form-item label="适用门店" prop="shop">
        <el-select v-model="ruleForm.shop" style="width:50%" multiple placeholder="请选择">
          <el-option
            :label="item.store_name"
            v-for="(item,index) in storelist"
            :key="index"
            :value="item.id"
          ></el-option>
          <!-- <el-option label="银点" value="2"></el-option>
          <el-option label="通电" value="3"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item label="适用座位类型" prop="seattype">
        <el-select v-model="ruleForm.seattype" style="width:50%" multiple placeholder="请选择">
          <el-option
            :label="item.title"
            v-for="(item,index) in genrelist"
            :key="index"
            :value="item.id"
          ></el-option>
          <!-- <el-option label="商务座" value="2"></el-option>
          <el-option label="豪华座" value="3"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item label="限制购买次数" prop="purchasesnum">
        <el-input v-model="ruleForm.purchasesnum" style="width:98%">
          <template slot="append">次</template>
        </el-input>
        <div>设置次数为0时则不为限制购买</div>
      </el-form-item>
      <el-form-item label="套餐费用" prop="mealprice">
        <el-input v-model="ruleForm.mealprice" style="width:98%">
          <template slot="append">元</template>
        </el-input>
        <div>费用为0时则用户注册后马上获得该套餐，仅最近的一个可生效</div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style>
.box {
  margin-left: 38px;
  margin-top: 22px;
}
.line {
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
}
.flexwap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
</style>

<script>
import { setMealAdd, setReturn } from "@/api/user";
import Base64 from "@/utils/base";
export default {
  data() {
    return {
      color: "#ffffff",
      colors: "#000000",
      changeval: "3",
      radiobool: "2",
      tips: false,
      startTime1: [new Date(0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59)],
      startTime:"",
      endTime: "",
      startTime2: [new Date(0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59)],
      startTimes:"",
      endTimes: "",
      ruleForm: {
        checked1: false,
        checked2: false,
        name: "",
        region: "3",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        domains: [],
        count_hour: "",
        fontcolor: "#ffffff",
        day: "",
        backcolor: "#000000",
        shop: "",
        seattype: "",
        resource: "",
        desc: "",
        // effectivedate: ""
      },
      genrelist: "",
      storelist: "",
      rules: {
        name: [
          { required: true, message: "请输入套餐名称", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择套餐类型", trigger: "change" }
        ],
        count_hour: [
          { required: true, message: "请输入可用总小时数", trigger: "blur" }
        ],
        useonce: [
          { required: true, message: "请输入可使用次数", trigger: "blur" }
        ],
        day: [
          { required: true, message: "请输入有效期", trigger: "blur" }
        ],
        fontcolor: [
          { required: true, message: "请选择字体颜色", trigger: "blur" }
        ],
        backcolor: [
          { required: true, message: "请选择背景颜色", trigger: "blur" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.getsetReturn();
  },
  methods: {
    changetabs(e){
      this.startTime = this.getSimpleDate(e[0])
      this.endTime = this.getSimpleDate(e[1])
    },
    changetaps(e){
      this.startTimes = this.getSimpleDate(e[0])
      this.endTimes = this.getSimpleDate(e[1])
    },
    getsetReturn() {
      setReturn({}).then(res => {
         if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.genrelist = res.result.genre;
        this.storelist = res.result.store;
      });
    },
    // 中国标准时间 转换成 年月日
 getSimpleDate(date) {
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? ('0' + m) : m;
  var d = date.getDate();
  d = d < 10 ? ('0' + d) : d;
  var h = date.getHours();
  var minute = date.getMinutes();
  minute = minute < 10 ? ('0' + minute) : minute;
  var s = date.getSeconds();
  s = s < 10 ? '0' + s : s;
  return h + ':' + minute
},
    submitForm(formName) {
      let arrsnew = []
      if(this.changeval == 1&&this.ruleForm.daynum&&this.ruleForm.price){
        arrsnew.push({
          value: this.ruleForm.daynum,
          values: this.ruleForm.price
      })
      }
      this.ruleForm.domains.map(v=>{
        if(v.value==''||v.values==undefined||v.values==''){
          return
        }
        arrsnew.push({
          value: v.value,
          values: v.values
      })
      })
      if(this.ruleForm.name==""){
        this.$message({
          message:"请输入套餐名称",
          type: "warning"
        })
        return
      }
      if(this.changeval==""){
        this.$message({
          message:"请选择套餐类型",
          type: "warning"
        })
        return
      }
      if(this.ruleForm.count_hour==""&&this.changeval==3){
        this.$message({
          message:"请输入可用总小时数",
          type: "warning"
        })
        return
      }
      if(this.ruleForm.useonce == ""&&this.changeval==1){
        this.$message({
          message:"请输入可使用次数",
          type: "warning"
        })
        return
      }
      if(this.ruleForm.day == ""&&(this.changeval==3||this.changeval==2)){
        this.$message({
          message:"请输入有效期",
          type: "warning"
        })
        return
      }
      if(this.ruleForm.day == "0"&&this.changeval==2){
        this.$message({
          message:"有效期需大于0",
          type: "warning"
        })
        return
      }
      if(this.ruleForm.fontcolor==""){
        this.$message({
          message:"请选择字体颜色",
          type: "warning"
        })
        return
      }
      if(this.ruleForm.backcolor==""){
        this.$message({
          message:"请选择背景颜色",
          type: "warning"
        })
        return
      }
      if(this.ruleForm.checked1==false && this.ruleForm.checked2==false){
        this.$message({
          message:"工作日和周末至少选择一个",
          type: "warning"
        })
        return
      }
      // if(this.ruleForm.checked1==true){
      //    if(this.startTime==""||this.startTime==null){
      //   this.$message({
      //     message:"请选择开始时间",
      //     type: "warning"
      //   })
      //   return
      // }
      // if(this.endTime==""||this.endTime==null){
      //   this.$message({
      //     message:"请选择结束时间",
      //     type: "warning"
      //   })
      //   return
      // }
      // }
      // if(this.ruleForm.checked2==true){
      //    if(this.startTimes==""||this.startTimes==null){
      //   this.$message({
      //     message:"请选择开始时间",
      //     type: "warning"
      //   })
      //   return
      // }
      // if(this.endTimes==""||this.endTimes==null){
      //   this.$message({
      //     message:"请选择结束时间",
      //     type: "warning"
      //   })
      //   return
      // }
      // }
      let params = {
        title: this.ruleForm.name,
        type: this.changeval,
        color: this.ruleForm.fontcolor || "",
        background: this.ruleForm.backcolor || "",
        time_slot_state: this.ruleForm.checked1 && this.ruleForm.checked2? 3: this.ruleForm.checked1? 1: this.ruleForm.checked2? 2: "",
        start_time: this.startTime||this.getSimpleDate(this.startTime1[0])||"",
        end_time:this.endTime||this.getSimpleDate(this.startTime1[1])||"",
        holidays_start_time: this.startTimes||this.getSimpleDate(this.startTime2[0])||"",
        holidays_end_time: this.endTimes||this.getSimpleDate(this.startTime2[1])||"",
        frequency: this.changeval==1?this.ruleForm.useonce:0,
        limit: this.ruleForm.purchasesnum,
        seat_type_id: this.ruleForm.seattype.join(","),
        cost: this.ruleForm.mealprice,
        store_ids: this.ruleForm.shop.join(","),
        hour: this.changeval == 1
            ? this.ruleForm.longtime
            : 0,
            count_hour:this.changeval == 3
            ? this.ruleForm.count_hour
            : 0,
        day: this.ruleForm.day,
        days_price:this.changeval == 1?arrsnew.length!=0?arrsnew:'':'',
        activation: this.radiobool,
        // take_effect: this.ruleForm.effectivedate
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          setMealAdd({
            request_data: Base64.encode(JSON.stringify(params))
          }).then(res => {
            if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
            this.$message({
              message: res.message,
              type: "success"
            });
            this.$router.go(-1);
          });
        } else {
          return false;
        }
      });
    },
    changecolor(e) {
      this.ruleForm.fontcolor = e;
    },
    changecolors(e) {
      this.ruleForm.backcolor = e;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    addDomain() {
      if (this.ruleForm.domains.length > 2) {
        this.tips = true;
        return false;
      }
      this.ruleForm.domains.push({
        value: "",
      });
    },
    removeDomain(item) {
      var index = this.ruleForm.domains.indexOf(item);
      if (index !== -1) {
        this.ruleForm.domains.splice(index, 1);
      }
      if (this.ruleForm.domains.length < 3) {
        this.tips = false;
      }
    },
    clichecked1(e) {
      this.ruleForm.checked1 = e;
      if(e==false){
        this.startTime=""
        this.endTime=""
      }
    },
    clichecked2(e) {
      this.ruleForm.checked2 = e;
      if(e==false){
        this.startTimes=""
        this.endTimes=""
      }
    },
    chagemeal(e) {
      this.changeval = e;
      // if(e!=3){
      //   this.ruleForm.count_hour=0
      // }
    },
    // changeradio(e) {
    //   this.radiobool = e;
    // }
  }
};
</script>
